<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="110px">
      <el-row el-row type="flex" justify="space-between" :gutter="16">
        <el-col :span="18">
          <el-row>
            <el-col :span="6">
              <el-form-item label="车牌号/车架号:" prop="carNoVinNo">
                <el-input v-model="queryParams.carNoVinNo" clearable placeholder="请输入车牌号/车架号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产权方:" prop="carBelongCompanyName">
                <el-input v-model="queryParams.carBelongCompanyName" clearable placeholder="请输入产权方"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌/车系/车型:">
                <linkage-select @changeNode="linkageChange" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆状态:" prop="businessType">
                <el-select v-model="queryParams.businessType" placeholder="请选择车辆状态">
                  <el-option v-for="item in dict.type.business_type" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-show="showSearch">
            <el-col :span="6">
              <el-form-item label="所在仓库:" prop="carDepotName">
                <el-input v-model="queryParams.carDepotName" clearable placeholder="请输入所在仓库"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险类型:" prop="insuranceType">
                <el-select v-model="queryParams.insuranceType" placeholder="请选择保险类型">
                  <el-option v-for="dict in dict.type.t_insurance_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商业险公司:" prop="commercialCompany">
                <el-input v-model="queryParams.commercialCompany" clearable placeholder="请输入商业险公司"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="商业险时效:" prop="commercialPolicyValidity">
                <el-select v-model="queryParams.commercialPolicyValidity" placeholder="请选择商业险时效">
                  <el-option v-for="item in validityList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-show="showSearch">
            <el-col :span="6">
              <el-form-item label="交强险公司:" prop="compulsoryCompany">
                <el-input v-model="queryParams.compulsoryCompany" clearable placeholder="请输入交强险公司"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交强险时效:" prop="compulPolicyValidity">
                <el-select v-model="queryParams.compulPolicyValidity" placeholder="请选择交强险时效">
                  <el-option v-for="item in validityList  " :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="保单号:" prop="insuranceNo">
                <el-input v-model="queryParams.insuranceNo" clearable placeholder="请输入保单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="财务付款日期:" prop="cityName">
                <el-input v-model="queryParams.cityName" clearable placeholder="请输入车型"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" style="display: flex;justify-content: space-between;">
          <div>
            <i class="el-icon-finished" style="color:#409EFF; font-size:16px;"></i>
            <e-button type="text" @click="() => showSearch = !showSearch"> <span
                style="font-size:14px;padding:0px 4px;">高级筛选</span></e-button>
            <i :class="!showSearch ? 'el-icon-arrow-down' : ' el-icon-arrow-up'"
              style="color:#409EFF; font-size:16px;"></i>
          </div>
          <div>
            <e-button type="primary" icon="el-icon-search" size="mini" @click.stop="handleQuery">搜索</e-button>
            <e-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</e-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <e-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['demo:demo:export']">导出</e-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="操作" align="center" width="140" fixed="left">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="viewOpen(scope.row , 1)"
            v-hasPermi="['demo:demo:remove']">查看</el-button>
          <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']" @click="viewOpen(scope.row , 2)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            v-hasPermi="['demo:demo:edit']">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="保险状态" align="center" fixed="left">
        <template slot-scope="{row}">

          <span v-show="row['insuranceStatus'] == '1'">待付款</span>

          <span v-show="row['insuranceStatus'] == '2'">待上传保单</span>
          <span v-show="row['insuranceStatus'] == '3'">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="保险类型" align="center" fixed="left">
        <template slot-scope="{row}">

          <span v-show="row['insuranceType'] == '1'">车辆续保</span>

          <span v-show="row['insuranceType'] == '2'">新车投保</span>

        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center" prop="carNo" fixed="left"></el-table-column>
      <el-table-column label="车架号" align="center" prop="vinNo" fixed="left"></el-table-column>
      <el-table-column label="品牌/车系/车型" align="center" fixed="left">
        <template slot-scope="{row}">
          {{ row.brandName }}{{ row.seriesName ? '/' + row.seriesName : '' }}{{ row.modelName ? '/' + row.modelName : '' }}
        </template>

      </el-table-column>
      <el-table-column label="产权方" align="center" prop="carBelongCompanyName" fixed="left"></el-table-column>
      <el-table-column label="车辆状态" align="center" fixed="left">
        <template slot-scope="{row}">

          <span v-show="row['businessType'] == '1'">整备中</span>

          <span v-show="row['businessType'] == '2'">备发车</span>
          <span v-show="row['businessType'] == '3'">预定中</span>

          <span v-show="row['businessType'] == '4'">用车中</span>
          <span v-show="row['businessType'] == '5'">已过户</span>

          <span v-show="row['businessType'] == '6'">已处置</span>
          <span v-show="row['businessType'] == '7'">已出售</span>
        </template>
      </el-table-column>
      <el-table-column label="租车方名称" align="center" prop="customerName" fixed="left"></el-table-column>
      <el-table-column label="车船税" align="center" prop="carTax" fixed="left"></el-table-column>


      <el-table-column label="交强险" align="center">


        <el-table-column label="保单号" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).policyCode }}
          </template>
        </el-table-column>


        <el-table-column label="保险公司" align="center">

          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).insuranceCompany }}
          </template>
        </el-table-column>
        <el-table-column label="保单时效" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).policyValidity }}
          </template>

        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).actualBeginTime }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).actualEndTime }}
          </template>
        </el-table-column>
        <el-table-column label="费用/元" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 1).insuranceAmount }}
          </template>
        </el-table-column>

      </el-table-column>
      <el-table-column label="商业险" align="center">
        <el-table-column label="保单号" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 2).policyCode }}
          </template>
        </el-table-column>


        <el-table-column label="保险公司" align="center">

          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 2).insuranceCompany }}
          </template>
        </el-table-column>
        <el-table-column label="保单时效" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos,2).policyValidity }}
          </template>

        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 2).actualBeginTime }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 2).actualEndTime }}
          </template>
        </el-table-column>
        <el-table-column label="费用/元" align="center">
          <template slot-scope="{ row}">
            {{ rowManage(row.manageVos, 2).insuranceAmount }}
          </template></el-table-column>

      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    getDataList,
    getInsuranceDetails,
    delInsurance
  } from "@/api/bxgl/insureManageApi.js";
  import {
    getToken
  } from "@/utils/auth";

  import LinkageSelect from "../components/linkageSelect";
  import {
    businessTypeList,
    insuranceTypeList,
    validityList
  } from "../components/dictionary";

  export default {
    name: "InsureManageList",
    dicts: ['t_insurance_type', 'business_type'],
    components: {
      LinkageSelect,
      // 'e-select': ESelect,
    },
    computed: {
      rowManage() {
        return (arr, type) => {
          let obj = {}
          let arri = []
          arri = arr.filter((v) => {
            return v.type == type
          })
          return obj = arri[0] || {}
        }
      },
    },
    data() {
      return {
        //按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,

        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        businessTypeList: [],
        insuranceTypeList: [],
        validityList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          carNoVinNo: "",
          carBelongCompanyName: "",
          brandName: "",
          seriesName: "",
          modelName: "",
          businessType: "",
          insuranceNo: "",
          compulsoryCompany: "",
          commercialCompany: "",
          carrierPolicyValidity: "",
          carrierCompany: "",
          compulPolicyValidity: "",
          commercialPolicyValidity: "",
          carDepotName: "",
          insuranceType: "",

        },

        total: 0,
        dataList: [

        ],
        tableCol: [{
            prop: "carNo",
            label: "车牌号",
            width: "100"
          },
          {
            prop: "vinNo",
            label: "车架号",
            width: "100"
          },
          {
            prop: "brandName",
            label: "品牌",
            width: "100"

          },
          {
            prop: "seriesName",
            label: "车系",
            width: "100"

          },
          {
            prop: "modelName",
            label: "车型",
            width: "100"

          },
          {

            label: "车辆状态",
            key: "businessType",
            width: "100"

          },
          {

            label: "维修状态",
            key: "maintenanceStatus",
            width: "100"

          },
          {

            label: "维保类型",
            key: "maintenance",
            width: "100"

          },
          {
            prop: "customerName",
            label: "客户名称",
            width: "100"

          },
          {
            prop: "expectStartTime",
            label: "预计开始时间",
            width: "160",

          }, {
            prop: "expectEndTime",
            label: "预计结束时间",
            width: "160"

          },
          {
            prop: "actualStartTime",
            label: " 实际开始时间",
            width: "160"

          }, {
            prop: "actualEndTime",
            label: "实际结束时间",
            width: "160"

          },
          {
            prop: "city",
            label: "车辆归属城市",
            width: "100",

          }, {
            prop: "cityName",
            label: "所在城市",
            width: "100",

          }


        ],


        // 表单参数
        form: {
          brandId: "",
          brandName: "",
          seriesName: "",
          seriesId: "",
          modelId: "",
          modelName: "",
          shortName: "",
          seriesGroupName: "",
          seriesGroupId: "",
          price: "",
          year: "",
          makerId: "",
          makerName: "",

          // 车辆信息
          liter: "",
          dischargeStandard: "",
          fuelTypeId: "",
          fuelTypeName: "",
          enginePower: "",
          enginePowerKw: "",
          isGreen: "",
          modelCode: "",
          driveName: "",
          driveType: "",
          modelStatus: "",
          gearType: "",
          gearName: "",
          greenTypeId: "",
          greenTypeName: "",
          makerDate: "",
          minRegYear: "",
          maxRegYear: "",
          stopMakeYear: "",
          intake: "",
          seatNumber: "",
          bodyType: "",
          doorNumber: "",
          carStruct: "",
          isParallel: "",
          priceAllowance: "",
        },
        // 表单校验
        rules: {
          testKey: [{
            required: true,
            message: "key键不能为空",
            trigger: "blur"
          }],
          value: [{
            required: true,
            message: "值不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      this.businessTypeList = businessTypeList
      this.insuranceTypeList = insuranceTypeList
      this.validityList = validityList
      console.log(this.dict.type.t_insurance_type);
    },
    methods: {
      linkageChange(val) {

        if (val) {
          this.queryParams.brandName = val[0] ? val[0].name : ''
          this.queryParams.seriesName = val[1] ? val[1].name : ''
          this.queryParams.modelName = val[2] ? val[2].name : ''
        } else {
          this.queryParams.brandName = ""
          this.queryParams.seriesName = ""
          this.queryParams.modelName = ""
        }
        this.$forceUpdate()
      },
      /** 查询测试单表列表 */
      getList() {
        this.loading = true;
        getDataList(this.queryParams).then(res => {
          if (res.code == "200") {
            const {
              rows,
              total
            } = res
            this.dataList = rows
            this.total = total
            this.loading = false;
          }
        });
      },


      // 表单重置
      reset() {
        this.form = {
          id: "",
          brandId: "",
          brandName: "",
          seriesName: "",
          seriesId: "",

          modelName: "",
          shortName: "",
          seriesGroupName: "",
          seriesGroupId: "",
          price: "",
          year: "",
          makerId: "",
          makerName: "",

          // 车辆信息
          liter: "",
          dischargeStandard: "",
          fuelTypeId: "",
          fuelTypeName: "",
          enginePower: "",
          enginePowerKw: "",
          isGreen: "",
          modelCode: "",
          driveName: "",
          driveType: "",
          modelStatus: "",
          gearType: "",
          gearName: "",
          greenTypeId: "",
          greenTypeName: "",
          makerDate: "",
          minRegYear: "",
          maxRegYear: "",
          stopMakeYear: "",
          intake: "",
          seatNumber: "",
          bodyType: "",
          doorNumber: "",
          carStruct: "",
          isParallel: "",
          priceAllowance: "",
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.brandName = ""
        this.queryParams.seriesName = ""
        this.queryParams.modelName = ""
        this.resetForm("queryForm");
        this.handleQuery();
      },

      viewOpen(row, type) {
        this.$router.push({
          path: "/bxgl/insureManageDetails",
          query: {
            id: row.id,
            type
          }
        })

      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id) {
              updateCar(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              carBrandAdd(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否删除？').then(() => {
          this.loading = true;
          return delInsurance(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          this.loading = false;
        });
      },

      /** 导出按钮操作 */
      handleExport() {
        this.download('car/carMaintenance/export', {
          ...this.queryParams
        }, `维修列表_${new Date().getTime()}.xlsx`)
      },

    }
  };
</script>
